<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
            <title>Cindy JS</title>
            <script type="text/javascript" src="../build/js/Cindy.js"></script>
            <link rel="stylesheet" href="../css/cindy.css">
            </head>

<body style="font-family:Arial;">
        <h1>Intersection of Conics</h1>


        <script id='csmove' type='text/x-cindyscript'>
        </script>


        <div  id="CSCanvas" style="width:600px; height:600px; border:2px solid #000000"></div>


        <script type="text/javascript">
            var gslp=[
                      {name:"A1", type:"Free", pos:[3,0]},
                      {name:"A2", type:"Free", pos:[2,2]},
                      {name:"A3", type:"Free", pos:[0,3]},
                      {name:"A4", type:"Free", pos:[3,1]},
                      {name:"A5", type:"Free", pos:[1,3]},

		      {name:"Co1", type:"ConicBy5", args:["A1","A2","A3","A4","A5"],color:[0,0,1],alpha:1,size:1},

                      {name:"B1", type:"Free", pos:[4,1]},
                      {name:"B2", type:"Free", pos:[3,3]},
                      {name:"B3", type:"Free", pos:[1,4]},
                      {name:"B4", type:"Free", pos:[-2,0]},
                      {name:"B5", type:"Free", pos:[1,-2]},
		      {name:"Co2", type:"ConicBy5", args:["B1","B2","B3","B4","B5"],color:[1,0,0],alpha:1,size:1},

		      {name:"CoCo", type:"IntersectConicConic", args:["Co1","Co2"],color:[1,0,0],alpha:1,size:1},

		      {name:"P1", type:"SelectP", args:["CoCo"],index:1,color:[1,0,0],size:3},
		      {name:"P2", type:"SelectP", args:["CoCo"],index:2,color:[0,1,0],size:3},
		      {name:"P3", type:"SelectP", args:["CoCo"],index:3,color:[0,0,1],size:3},
		      {name:"P4", type:"SelectP", args:["CoCo"],index:4,color:[1,0,1],size:3},


                      {name:"C1", type:"Free", pos:[4,5]},
                      {name:"C2", type:"Free", pos:[3,-3]},
                      {name:"C3", type:"Free", pos:[2,4]},
                      {name:"C4", type:"Free", pos:[-2,1]},
                      {name:"C5", type:"Free", pos:[-1,-2]},

		      {name:"Co3", type:"ConicBy5", args:["C1","C2","C3","C4","C5"],color:[1,0,1],alpha:1,size:1},

		      {name:"CoCo2", type:"IntersectConicConic", args:["Co1","Co3"],color:[1,0,0],alpha:1,size:1},
		      {name:"CoCo3", type:"IntersectConicConic", args:["Co2","Co3"],color:[1,0,0],alpha:1,size:1},

		      {name:"Q1", type:"SelectP", args:["CoCo2"],index:1,color:[1,0,0],size:3},
		      {name:"Q2", type:"SelectP", args:["CoCo2"],index:2,color:[0,1,0],size:3},
		      {name:"Q3", type:"SelectP", args:["CoCo2"],index:3,color:[0,0,1],size:3},
		      {name:"Q4", type:"SelectP", args:["CoCo2"],index:4,color:[1,0,1],size:3},

		      {name:"R1", type:"SelectP", args:["CoCo3"],index:1,color:[1,0,0],size:3},
		      {name:"R2", type:"SelectP", args:["CoCo3"],index:2,color:[0,1,0],size:3},
		      {name:"R3", type:"SelectP", args:["CoCo3"],index:3,color:[0,0,1],size:3},
		      {name:"R4", type:"SelectP", args:["CoCo3"],index:4,color:[1,0,1],size:3},

		      {name:"Co4", type:"ConicBy5", args:["A1","B2","C3","B4","C5"],color:[0,0,0],alpha:1,size:1},
		      {name:"CoCo4", type:"IntersectConicConic", args:["Co1","Co4"],color:[0.5,0,0.5],alpha:1,size:1},
		      {name:"CoCo5", type:"IntersectConicConic", args:["Co2","Co4"],color:[1,1,0],alpha:1,size:1},
		      {name:"CoCo6", type:"IntersectConicConic", args:["Co3","Co4"],color:[1,1,1],alpha:1,size:1},

		      {name:"S1", type:"SelectP", args:["CoCo4"],index:1,color:[1,0,0],size:3},
		      {name:"S2", type:"SelectP", args:["CoCo4"],index:2,color:[0,1,0],size:3},
		      {name:"S3", type:"SelectP", args:["CoCo4"],index:3,color:[0,0,1],size:3},
		      {name:"S4", type:"SelectP", args:["CoCo4"],index:4,color:[1,0,1],size:3},

		      {name:"T1", type:"SelectP", args:["CoCo5"],index:1,color:[1,0,0],size:3},
		      {name:"T2", type:"SelectP", args:["CoCo5"],index:2,color:[0,1,0],size:3},
		      {name:"T3", type:"SelectP", args:["CoCo5"],index:3,color:[0,0,1],size:3},
		      {name:"T4", type:"SelectP", args:["CoCo5"],index:4,color:[1,0,1],size:3},

		      {name:"O1", type:"SelectP", args:["CoCo6"],index:1,color:[1,0,0],size:3},
		      {name:"O2", type:"SelectP", args:["CoCo6"],index:2,color:[0,1,0],size:3},
		      {name:"O3", type:"SelectP", args:["CoCo6"],index:3,color:[0,0,1],size:3},
		      {name:"O4", type:"SelectP", args:["CoCo6"],index:4,color:[1,0,1],size:3},

                      ];
           var cdy = CindyJS({canvasname:"CSCanvas",
//  			tracingStateReport: "tracingStateReport",
                        movescript:"csmove",
                        //grid:1,
                        //snap:true,
                        geometry:gslp});

        </script>


  <p>
    <span id="tracingStateReport"></span>
  </p>
</body>
</html>
